<template>
	<view class="details pB50">
		<!--<view class="details-top">
			
			 <view class="username bold f14">
				{{meetinginfo.vister_name}}
			</view> 
		</view>-->
		
		<view class="details-message pT10  p5">
			<p class="bold pB5">访客信息</p>
			<view class="bg_white">
				<div class="details-top bg_white">
					<div class="pR5 w100">
						<image :src="meetinginfo.vister_personimg | personimg" mode="aspectFill"></image>
					</div>
				</div> 
			</view>
			<view class="details-message-name">访客姓名：{{meetinginfo.vister_name}}</view>
			<view class="details-message-sex" v-if="meetinginfo.vister_sex==1">访客性别：男</view>
			<view class="details-message-sex" v-if="meetinginfo.vister_sex==2">访客性别：女</view>
			<view class="details-message-number" v-if="meetinginfo.vister_identitycard | isidcard">身份证号：{{meetinginfo.vister_identitycard | isidcard}}</view>
			<view class="details-message-phone">手机号码：{{meetinginfo.vister_mobile}}</view>
			<view class="details-message-phone" v-if="meetinginfo.carnumber">车牌号码：{{meetinginfo.carnumber}}</view>
			<view class="intervieweeInformation-reason">来访缘由：{{meetinginfo.app_reson}}</view>
		</view>
		<view class="intervieweeInformation pT10">
			<p class="bold pB5">受访人信息</p>
			<view class="intervieweeInformation-company">到访公司：{{meetinginfo.app_company_name}}</view>
			<view class="intervieweeInformation-name">受访人员：{{meetinginfo.app_user_name}}</view>
			<view class="intervieweeInformation-name">手机号码：{{meetinginfo.app_mobile}}</view>
			<view class="intervieweeInformation-time">到访开始：{{retime(meetinginfo.app_visittime)?retime(meetinginfo.app_visittime):''}}</view>
			<view class="intervieweeInformation-time">到访结束：{{retime(meetinginfo.app_endvisittime)?retime(meetinginfo.app_endvisittime):''}}</view>
			<view class="intervieweeInformation-location">受访部门：{{meetinginfo.app_address}}</view>			
			<!-- <view class="intervieweeInformation-department">受访部门：{{meetinginfo.address}}</view>			 -->
			<view class="intervieweeInformation-departureTime" v-if="retime(meetinginfo.leavetime)">离开时间：{{retime(meetinginfo.leavetime)?retime(meetinginfo.leavetime):''}}</view>
			<view class="intervieweeInformation-security" v-if="meetinginfo.security_name!=null">值班保安：{{meetinginfo.security_name}}</view>
			<view class="intervieweeInformation-security" v-if="!meetinginfo.security_name">值班保安：{{userinfo.name}}</view>
		</view>
		<view class="statusInformation pT10" v-if="time_streamlist.length !=0">
			<p class="bold pB5">邀请动态</p>
			<view class="status">
				<view class="status-information"><span style="margin-left:15upx;">到访状态：{{meetinginfo.m_tips}}</span></view>
					<view class="status-information" v-for="item in time_streamlist" :class="item.type=='2'?'':''" v-if="item.tips=='提交时间' || item.tips=='受访人员' || item.tips=='访客确认' || item.tips=='访客姓名' || item.tips=='取消原因' || item.tips=='查看时间'">
						<span style="margin-left:15upx;">{{item.tips}}：{{item.value}}</span>
					</view>				
			</view>
			
		</view>
		<view class="statusInformation pT10" v-if="time_streamlist[7]">
			<p class="bold pB5">来访动态</p>
			<view class="status">
				<!-- <view class="status-information"><span style="margin-left:15upx;">到访状态：{{meetinginfo.m_tips}}</span></view> -->
					<view class="status-information" v-for="item in time_streamlist" :class="item.type=='2'?'':''" v-if="item.tips=='保安扫码' || item.tips=='保安人员' || item.tips=='确认离开' ||item.tips=='取消进入' || item.tips=='取消缘由'">
						<span style="margin-left:15upx;">{{item.tips}}：{{item.value}}</span>
					</view>				
			</view>
			
		</view>
		<view class="statusInformation pT10" v-if="passchanger">
			<p class="bold pB5">请访客出示粤康码，由保安拍照上传</p>
			<view class="status bg_white" style="padding: 10px;">									
					<view class="imgbox" style="width: 200upx; height: 200upx; background-color: #dfdfdf;position: relative;">
						<view class="img" v-if="idCard1" @click="previewImg(idCard1)"><image :src="idCard1" style="width: 200upx; height: 200upx; background-color: #C0C0C0;"/></view>
						<view class="noimginshow" v-if="!idCard1"  @click="selectImg1">
							<view class="textdiv" style="margin: auto; line-height: 200upx; margin-left:32px">
								<uni-icons type="plus-filled" color='#06C' size="40"></uni-icons>
							</view>						
						</view>					
						<view class="deltrash" v-if="idCard1" @tap="delimgsrc('idCard1')" style="margin-top:-112px;margin-left:72px;position: absolute;background-color:white;border: solid 1px #ebebeb;">
							<uni-icons type="trash" color='#06C' size="35"></uni-icons>
						</view>
						
						</view>
					</view>
		</view>
		<view class="statusInformation pT10" v-if="!passchanger && meetinginfo.healthy_img  || !refusechanger && meetinginfo.healthy_img">
			<p class="bold pB5">点击查看该访客粤康码图片</p>
			<view class="status bg_white"  style="padding: 10px;">									
					<view class="user-imgshow" @click="previewImg(meetinginfo.healthy_img)">
						<image :src="meetinginfo.healthy_img" style="width: 200upx; height: 200upx; background-color:  #ebebeb;"/>
					</view>
			</view>
		</view>
		<view class="statusInformation pT10" v-if="time_streamlist[10]">
			<p class="bold pB5">到访动态</p>
			<view class="status">
				<!-- <view class="status-information"><span style="margin-left:15upx;">到访状态：{{meetinginfo.m_tips}}</span></view> -->
					<view class="status-information" v-for="item in time_streamlist" :class="item.type=='2'?'statusEND':''" v-if="item.tips=='扫码接待' || item.tips=='接待人员' || item.tips=='接待完成'" >
						<span style="margin-left:15upx;">{{item.tips}}：{{item.value}}</span>
					</view>
				
			</view>
			
		</view>
		<view class="btn-button">
			<!-- <view class="cancel">取消预约</view> -->
			<view class="Approved" v-if="passchanger" @click="getpass" :class="[passchanger?'Approved':'ban']">同意进入</view>
			<view class="Refuse" v-if="refusechanger" @click="getban" :class="[refusechanger?'Refuse':'ban']">不同意进入</view>
			<view class="Confirm" v-if="confirmchanger" @click="getleave" :class="[confirmchanger?'Confirm':'ban']">同意离开</view>
			<view class="tCenter showtext f16" v-if="btnshowstate">
				{{btnshowtext}}
			</view>
			
		<!-- #ifdef H5 -->
			<prompt style="color: #000000;" :visible.sync="promptVisible" placeholder="请输入不同意的原因" :defaultValue="注明" @confirm="clickPromptConfirmBan" mainColor="#e74a39" >
  <!-- 这里放入slot内容-->
</prompt>
	<!-- #endif -->
		</view>
		<!-- <backhome v-if="gomainchanger"></backhome> -->
		<!-- 底部导航 -->
		<footernav  pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	import {arrivearrive_info,personaccept,personleave,personrefuse} from '../../common/api/appointment.js'; //引进requst方法
	import Prompt from '@/components/zz-prompt/index.vue' /*弹窗提示组件*/
	import {userinfo} from '@/common/api/user.js'
	import backhome from '@/components/backhome.vue';
	import {timestampToTime} from '@/common/common.js'
	import mInput from '../../components/m-input.vue';
	import {idcardupcache,userdelcache} from '../../common/api/user.js';
	import request from '../../common/vmeitime-http/requstx.js';	
	export default {																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																		
		components:{
			backhome,
			Prompt
		},
		data() {
			return {
				companyid:"",
				detaildata:[],
				id:"",
				departname:"",
				btnshowstate:false,
				btnshowtext:'',
				meetingid:'',
				meetinginfo:[],
				/*保安信息*/
				userinfo:[],
				promptVisible: false,
				bantext:'',
				gomainchanger:false,
				passchanger:true,
				refusechanger:true,
				confirmchanger:false,
				showclick:true,
				time_streamlist:[],
				idCard1: '',
				bigimgHeight:0,
				bigimgWidth:0,
				imgsrc:'',
				value:'',
			};
		},
		
		methods: {
			previewImg(logourl) {
				if(logourl){
					let _this = this;
					let imgsArray = [];
					imgsArray[0] = logourl
					uni.previewImage({
						current: 0,
						urls: imgsArray
					});
				}
			},
			delimgsrc(type){
				if(type=='idCard1'){
					this.idCard1='';					
				}
			},
			selectImg1: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					// sourceType: ['camera'], //从相册选择
					sizeType: ['original', 'compressed'], 
					success:function(res){					
						  const tempFilePaths = res.tempFilePaths;
						  that.imgsrc=tempFilePaths[0]; 
						  console.log("tempFilePaths[0]", that.imgsrc) 
						// 因底层限制一次上传一个
						that.idCard1 = that.imgsrc;
					
					}
				});
			},
			
			retime(time){
				if(time == null){
					return false
				}
				return timestampToTime(time)
			},
			    /**
			     * 点击弹出输入框确定
			     */
			clickPromptConfirmBan(val) { 
				let that=this;
				if(this.meetinginfo.refusetime != null){
					uni.showToast({
					    title: '不同意该访客进入，无需重复操作',
					    duration: 2000,
						icon:'none'
					});
					return 
				}
			
			      this.bantext = val
				  console.log(this.bantext)
				  uni.showToast({
				  	icon:'loading',
				  	title: '等待处理中...',
				  });
				  personrefuse({
					  'uid':this.userinfo.id,
					  'meetingid':this.meetingid,
					  'refuseremark':this.bantext
				  }).then(res=>{
					  that.promptVisible = false
					  
					  if(res.data.code ==200){	
						uni.showModal({
							title: '',
							content: '确定不接受进入',						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								
								if (res.confirm) {
									uni.showToast({
										title: '已不同意访客进入',
									});
									if( this.bantext != ''){
										that.btnshowstate=true,
										that.promptVisible = false
										that.btnshowtext='保安不同意进入';
										that.gomainchanger = true																											
										that.passchanger = false
										that.refusechanger = false
										that.confirmchanger =  false									
									}else{
										uni.showToast({
										    title: '请输入不同意的原因',
										    duration: 2000,
											icon:'none'
										});
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
							
						});
					  }else{
						uni.showModal({
							title: '',
							content: res.data.message,						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								if (res.confirm) {
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					  
					 
				  })
				  
			    },
			getpass(){
				let that=this;
				that.confirmchanger =  false
				if(!this.passchanger){
					uni.showToast({
					    title: '当前无法操作',
					    duration: 2000,
						icon:'none'
					});
					return;
					}
				/*保安uid----meetingid---*/
				let userid=uni.getStorageSync('userid');
				if(!userid){
					uni.getStorage({
					    key: 'userInfo',
					    success: res=> {
							console.log(res)
					    }
					});
				}
				if(this.showclick){
					this.showclick=false;
					uni.showModal({
						title: '',
						content: '同意访客进入？',						
						// showCancel:false,
						// confirmText: "确定",
						success: function (res) {
							
							if (res.confirm) {	
								uni.showLoading({
									title: '请等待...'
								});
								
				// 				uni.showLoading({
				//     title: '正在进行相关操作...'  
				// });
				
					
				
				personaccept({uid:that.userinfo.id,meetingid:that.meetingid}).then(res=>{
					that.showclick=true;
					console.log(res)
					uni.hideLoading();
					if(res.data.code == 200){
						// uni.showToast({
						//     title: '确认进入成功',
						//     duration: 2000
						// });
						const token = uni.getStorageSync('token');
						uni.uploadFile({
							url: that.apihttpurl+'/appointment/upload',
							filePath:that.imgsrc,
							name:'imgurl',
							header:{
								token: token,
							},						
							formData:{
								meetingid:that.meetingid,
							},
							success:(res) => {
								console.log(res);
								uni.hideLoading();
								
							},
							fail(res) {
								console.log(res)
							}
						});
						uni.showModal({
							title: '',
							content: '已同意访客进入',						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								
								if (res.confirm) {
									that.btnshowstate=true,
									that.btnshowtext='已同意访客进入';
									that.gomainchanger = true
									that.passchanger = false
									that.refusechanger = false
									that.confirmchanger = true
									
									console.log("meetingid"+that.meetingid)
									uni.redirectTo({
									    url: 'useraudit?meetingid='+that.meetingid
									});	
								} else if (res.cancel) {
									that.confirmchanger =  true
									console.log('用户点击取消');
									
								}
								
							}
						});
						
						
						// uni.navigateTo({
						//     url: '../'
						// });
					}else{
						this.passchanger=true
						uni.showModal({
							title: '',
							content: res.data.message,						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								if (res.confirm) {
									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				
				}else if (res.cancel) {
							that.showclick=true;
							console.log('用户点击取消');
						}
					}
				});
				
				
				}
			},
			
			getleave(){
				let that=this;
				if(!this.confirmchanger){
					uni.showToast({
					    title: '当前无法操作',
					    duration: 2000,
						icon:'none'
					});
					return}
				let userid=uni.getStorageSync('userid');
				if(!userid){
					uni.getStorage({
					    key: 'userInfo',
					    success: res=> {
							console.log(res)
					    }
					});
				}
				if(this.showclick){
					this.showclick=false;
					
					uni.showModal({
						title: '',
						content: '同意离开？',						
						// showCancel:false,
						// confirmText: "确定",
						success: function (res) {
							uni.showLoading({
								  title: '正在进行相关操作...'  
							})
							if (res.confirm) {
							
				personleave({uid:that.userinfo.id,meetingid:that.meetingid}).then(res=>{
					that.showclick=true;
					console.log(res)
					uni.hideLoading();
					if(res.data.code == 200){
						
						uni.showModal({
							title: '',
							content: '确认离开成功',						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								
								if (res.confirm) {
									that.btnshowstate=true,
									that.btnshowtext='已同意访客离开';
									that.gomainchanger = true									
									that.passchanger = false
									that.refusechanger = false
									that.confirmchanger = false
									uni.navigateTo({
										url:'../myyuyue/myyuyue?type='+2
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}else{
						uni.showModal({
							title: '',
							content: res.data.message,						
							showCancel:false,
							confirmText: "确定",
							success: function (res) {
								if (res.confirm) {
									
								} else if (res.cancel) {
									
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				} else if (res.cancel) {
					that.showclick=true;
							uni.hideLoading();
							console.log('用户点击取消');
						}
					}
				});
				}
			},
			getban(){
				if(!this.refusechanger){
					uni.showToast({
					    title: '当前无法操作',
					    duration: 2000,
						icon:'none'
					});
					return}
				this.promptVisible =true
				let userid=uni.getStorageSync('userid');
				if(!userid){
					uni.getStorage({
					    key: 'userInfo',
					    success: res=> {
							console.log(res)
					    }
					});
				}
				
				/*code  ban ......*/
				return 
			}
		},
		onLoad(event) {
			userinfo({}).then(res=>{
				if(res.data.code == 200){
					this.userinfo = res.data.data
					console.log(this.userinfo.roleid!=1 && this.userinfo.roleid!=6)
					
					//console.log(!(this.userinfo.roleid!=1 || this.userinfo.roleid!=2 || this.userinfo.roleid!=5 || this.userinfo.roleid!=6))
					if(!(this.userinfo.roleid!=1 || this.userinfo.roleid!=2 || this.userinfo.roleid!=5 || this.userinfo.roleid!=6)){
						uni.showToast({
							title: '您无权限访问',
							icon: 'none',
							duration: 2000
						});
						uni.reLaunch({
						    url: '../main/main'
						});
					}
				 console.log(this.userinfo)
					
					
				}	
			})
			// return
			console.log(event);
			// try {
			// 	this.detaildata = JSON.parse(decodeURIComponent(event));
			// 	console.log(this.detaildata);
			// } catch (error) {
			// 	this.detaildata = JSON.parse(event);
			// 	console.log(this.detaildata);
			// }
			this.id = event.deptid;
			console.log(this.id);
			this.departname=event.departname;
			this.meetingid = event.meetingid
			
			arrivearrive_info({meetingid:this.meetingid,type:'security'}).then(res=>{
				// arrive_status 
				// 状态(1-到达门口，2-保安放行，3-到达指定位置，4-完成-离开，5-保安不接受，6 离开部门
				console.log(res)
				if(res.data.code == 200){
					this.meeting_id = res.data.meeting_id
					console.log('a'+this.meeting_id)
					this.meetinginfo = res.data.data
					this.time_streamlist=res.data.data.time_stream
	
					// if(this.meetinginfo.passtime!=null){ //进入时间
					// 	this.passchanger = false
					// 	this.refusechanger = false
					// 	this.confirmchanger = true
					// }
					// if(this.meetinginfo.refusetime!=null){ //不接受时间
					// 	this.refusechanger = false
					// 	this.passchanger = false
					// 	this.confirmchanger = false
					// }
					// if(this.meetinginfo.leavetime!=null){ //离开时间
					// 	this.confirmchanger= false
					// }
					if(this.meetinginfo.arrive_status=='0'||this.meetinginfo.arrive_status=='1'){ //访客到达
						this.passchanger = true
						this.refusechanger = true
						this.confirmchanger = false
						
					}else if(this.meetinginfo.arrive_status=='2'||this.meetinginfo.arrive_status=='3'||this.meetinginfo.arrive_status=='6'){
						this.passchanger = false
						this.refusechanger = false
						this.confirmchanger = true
						
					}else if(this.meetinginfo.arrive_status=='5'){
						this.passchanger = false
						this.refusechanger = false
						this.confirmchanger = false
						
						this.btnshowstate=true,
						this.btnshowtext='不同意该访客进入';
					}else  if(this.meetinginfo.arrive_status=='4'){
						this.passchanger = false
						this.refusechanger = false
						this.confirmchanger = false
						
						this.btnshowstate=true,
						this.btnshowtext='本次来访已完成';
					}else{
						this.passchanger = false
						this.refusechanger = false
						this.confirmchanger = false
						
						this.btnshowstate=true,
						this.btnshowtext='本次来访已完成';
					}
				}
			})
			
		},
	}
</script>

<style lang="scss" scoped>
.user-imgshow image{width: 160upx;}
.details {
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	width: 100%;
	background-color: #efeff4;
	.details-top {	
		display: flex;
		width: 55%;
		margin: 0 auto;
		font-size: 117px;
		color: rgba(153, 153, 153, 1);
		// border: 1px solid;
		margin-top: 20px;
		image{
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #fff;
			display: block;
			margin: 0 auto;
			}
	}
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.intervieweeInformation {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
	.statusInformation {
		width: 95%;
		margin: auto;
		.status-information {
			display: flex;
			.right {
				margin-left: 0px;
			}
		}
		.statusEND{padding-bottom:10px;border-bottom: 1px solid #9e9e9e;}
	}
	.btn-button {
		display: flex;
		width: 90%;
		margin: auto;
		justify-content: space-around;
		margin: 20px;
		uni-view {
			color: rgba(255, 255, 255, 1);

			border-radius: 18px;
			// font-size: 11px;
			padding: 5px 20px;
		}
		.cancel {
			background-color: rgba(212, 48, 48, 1);
		}
		.Approved {
			background-color: rgba(42, 130, 228, 1);
		}
		.Confirm {
			background-color: rgba(90, 162, 67, 1);
		}
		.Refuse{
			background-color: rgba(210, 61, 61, 1);
		}
		.ban{
			background-color: #cfcfcf;
		}
		.showtext{color: #000;}
	}
}
</style>
